<style lang="less">
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .search-info-style {
    margin: 10px;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .title {
    text-align: center;
    font-size: 1.5rem;
    padding: 20px;
  }
  .notice-name {
    line-height: 2.5;
    margin-top: 6%;
  }
  .notice-context {
    text-indent: 2em;
    line-height: 2.5;
  }
  .notice-content1 {
    padding: 0 4% 0 12%;
    position:relative;
  }
  .notice-address {
    text-align: right;
    margin-top: 10%;
  }
  .notice-address1 {
    text-align: right;
    margin-top: 10px;
  }
  .notice-date {
    text-align: right;
  }
  .text-line {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    text-align: center;
  }
  .text-line-date {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    width: 10%;
    text-align: center;
  }
  .text-line-address {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    width: 15%;
    text-align: center;
  }
  .print-btn {
    padding: 15px;
    float: right;
  }
  .code-img2 {
    height: 120px;
    width: 120px;
    top: 70%;
    left: 4%;
    position: absolute;
  }
  .code-img1 {
    height: 60%;
    width: 90%;
    margin-left: 5%;
  }
  .centerimg {
    text-align: center;
  }
  .pre_img_style {
    height:500px;
    width:auto;
    max-width: 500px;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
</style>

<template>

  <div>
    <Row class="search-info-style">
      <Col span="2" align="center" style="line-height: 2;">姓名:</Col>
      <Col span="4">
        <Input v-model="queryParam.name" style="width: 80%" placeholder="请输入姓名"></Input>
      </Col>
      <Col span="2" align="center" style="line-height: 2;">证件号码:</Col>
      <Col span="4">
        <Input v-model="queryParam.card_no" style="width: 80%" placeholder="请输入证件号码"></Input>
      </Col>
      <Col span="2" align="center" style="line-height: 2;">政治面貌:</Col>
      <Col span="4">
        <Select v-model="queryParam.political_status" style="width: 80%">
          <Option value="中共党员">中共党员</Option>
          <Option value="中共预备党员">中共预备党员</Option>
          <Option value="九三学社社员">九三学社社员</Option>
          <Option value="共青团员">共青团员</Option>
          <Option value="农工党党员">农工党党员</Option>
          <Option value="台盟盟员">台盟盟员</Option>
          <Option value="无党派人士">无党派人士</Option>
          <Option value="普通居民">普通居民</Option>
          <Option value="民建会员">民建会员</Option>
          <Option value="民盟盟员">民盟盟员</Option>
          <Option value="民进会员">民进会员</Option>
          <Option value="民革党员">民革党员</Option>
          <Option value="致公党党员">致公党党员</Option>
        </Select>
      </Col>
      <Button class="new-btn-sty" type="primary" icon="ios-search" @click="queryData">搜索</Button>
      <Button class="new-btn-sty" type="primary" icon="ios-add" @click="handleAdd" style="margin-left:2px">添加</Button>
    </Row>
    <div>
      <Modal
        v-model="deleteModal"
        title="删除"
        @on-ok="deleteOk()">
        是否确认删除？
      </Modal>
    </div>
    <div>
      <people-add-modal ref="peopleAddModal"></people-add-modal>
      <Divider/>
      <Table border :columns="columns" :data="tableData">
        <template slot-scope="{ row }" slot="action">
          <Button type="info" size="small" class="actionBtn" @click="handleView(row)">查看</Button>
          <Button type="info" size="small" class="actionBtn" @click="handleEdit(row)" style="margin-left: 10px">修改</Button>
          <Button type="error" size="small" class="actionBtn" @click="handleDelete(row)" style="margin-left: 10px">删除</Button>
        </template>
      </Table>
      <Divider/>
      <Page :total="dataCount" :page-size="pageSize" show-total class="paging" style="float: right"
            @on-change="handleTableChange" :current="pageNo"></Page>
    </div>

  </div>
</template>

<script>
import peopleAddModal from './modules/peopleAddModal.vue'
import { getPageList, deleteData } from './js/index.js'

export default {
  components: {
    peopleAddModal
  },
  data() {
    return {
      selectRow: {},
      deleteModal: false,
      pageNo: 1,
      pageSize: 10,
      dataCount: 0,
      queryParam: {},
      Loading: false,
      tableData: [],
      columns: [
        {
          title: '姓名',
          align: 'center',
          key: 'name'
        },
        {
          title: '证件号码',
          align: 'center',
          key: 'card_no',
          render: (h, params) => {
            var cardno = params.row.card_no
            if (cardno) {
              if (cardno.length == 18) {
                cardno = cardno.substring(0, 6) + '********' + cardno.substring(14)
              }
            }
            return h('div', cardno)
          }
        },
        {
          title: '联系电话',
          align: 'center',
          key: 'phone'
        },
        {
          title: '岗位',
          align: 'center',
          key: 'post'
        },
        {
          title: '政治面貌',
          align: 'center',
          key: 'political_status'
        },
        {
          title: '家庭住址',
          align: 'center',
          key: 'address'
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 100,
          align: 'center'
        }
      ]
    }
  },
  methods: {
    handleAdd() {
      let that = this
      that.$refs.peopleAddModal.people = {}
      that.$refs.peopleAddModal.readonly = false
      that.$refs.peopleAddModal.title = '添加人员信息'
      that.$refs.peopleAddModal.create()
    },
    handleEdit(row) {
      let that = this
      that.$refs.peopleAddModal.people = row
      that.$refs.peopleAddModal.readonly = false
      that.$refs.peopleAddModal.title = '修改人员信息'
      that.$refs.peopleAddModal.create()
    },
    handleView(row) {
      let that = this
      that.$refs.peopleAddModal.people = row
      that.$refs.peopleAddModal.readonly = true
      that.$refs.peopleAddModal.title = '查看人员信息'
      that.$refs.peopleAddModal.create()
    },
    handleDelete(row) {
      this.selectRow = row
      this.deleteModal = true
    },
    deleteOk() {
      deleteData(this.selectRow).then(ret => {
        if (ret.data.errcode === 0) {
          this.reloadData()
        } else {
          this.$Notice.error({
            title: '删除失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    reloadData() {
      let that = this
      let param = that.queryParam
      param.pageNo = that.pageNo
      param.pageSize = that.pageSize
      getPageList(param).then(ret => {
        if (ret.data.errcode === 0) {
          that.tableData = ret.data.data.results
          that.dataCount = ret.data.data.totalRecord;
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    queryData() {
      this.reloadData()
    },
    searchReset() {
      this.queryParam = {}
      this.reloadData()
    },
    handleTableChange(index) {
      this.pageNo = index;
      this.reloadData();
    }
  },
  created() {
    let that = this
    let param = that.queryParam
    param.pageNo = 1
    param.pageSize = 10
    getPageList(param).then(ret => {
      console.log('ret', ret)
      if (ret.data.errcode === 0) {
        that.tableData = ret.data.data.results
        that.dataCount = ret.data.data.totalRecord;
      } else {
        this.$Notice.error({
          title: '查询失败',
          desc: ret.data.errmsg
        })
      }
    })
  }
}
</script>
